<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
<title>途羊旅游网后台管理系统</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/uniform.css" />
<link rel="stylesheet" href="css/select2.css" />
<link rel="stylesheet" href="css/unicorn.main.css" />
<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
  .error{
  	color:red;
  	font-size:12px;
  }
  .success{
  	color:green;
  	font-size:12px;
  }
  
</style>
<body>

	<div id="header">
		<h1>
			<a href="./dashboard.html">Unicorn Admin</a>
		</h1>
	</div>

	<div id="user-nav" class="navbar navbar-inverse">
		<ul class="nav btn-group">
			<li class="btn btn-inverse"><a title="" href="#"><i
					class="icon icon-user"></i> <span class="text">欢迎进入！管理员： ${sessionScope.admin.adminName}</span></a></li>
			
			<li class="btn btn-inverse"><a title="" href="login.jsp"><i
					class="icon icon-share-alt"></i> <span class="text">退出</span></a></li>
		</ul>
	</div>

	<div id="sidebar">
		<a href="#" class="visible-phone"><i class="icon icon-th-list"></i>
			Tables</a>
		<ul>
			<li><a href="index.jsp"><i class="icon icon-th-list"></i>
					<span>首页</span> </a>
			</li>
			<li><a href="userManage.jsp"><i class="icon icon-th-list"></i> <span>用户管理</span></a></li>
			<li class="submenu active open">
					<a href="#" style="display: block;"><i class="icon icon-th-list"></i> <span>景点管理</span> <span class="label">2</span></a>
					<ul>
						<li class="active" ><a href="insertScenic.jsp">新增景点</a></li>
						<li><a href="findAllScenic.jsp">维护景点信息</a></li>
						
					</ul>
				</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>酒店管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="insert-hotel.jsp">
							<span>新增酒店</span></a></li>
					<li><a href="hotel-management.jsp">
							<span>维护酒店信息</span></a></li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#"><i class="icon icon-th-list"></i> <span>客房管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="room-management.jsp">客房信息维护</a></li>
					<li><a href="insert-room.jsp">新增客房</a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>评论管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="hotel-comment.jsp">
							<span>大众点评酒店</span></a></li>
					<li><a href="scenic-comment.jsp">
							<span>大众点评景点</span></a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>订单管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="findAllHotelOrder.jsp">
							<span>酒店订单</span></a></li>
					<li><a href="findAllScenicOrder.jsp">
							<span>景点门票订单</span></a></li>
				</ul>
			</li>



		</ul>

	</div>

	<div id="style-switcher">
		<i class="icon-arrow-left icon-white"></i> <span>Style:</span> <a
			href="#grey"
			style="background-color: #555555; border-color: #aaaaaa;"></a> <a
			href="#blue" style="background-color: #2D2F57;"></a> <a href="#red"
			style="background-color: #673232;"></a>
	</div>

	<div id="content">
		<div id="content-header">
			<h1>景点管理</h1>
			
		</div>
		<div id="breadcrumb">
			<a href="#" class="tip-bottom"><i class="icon-home"></i> Home</a><a href="#" class="current">景点管理</a> <a href="#" class="current">新增景点</a>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">

					<div class="widget-box">
						<div class="widget-title">
							<span class="icon"> <i class="icon-align-justify"></i>
							</span>
							<h5>Text inputs</h5>
						</div>
						<div class="widget-content nopadding">
							<form method="post" action="${pageContext.request.contextPath}/scenic" enctype="multipart/form-data" class="form-horizontal">

								  <!--  隐藏域 -->
								<input type="hidden" name="op" value="insertScenic"/>
								<div class="control-group"
									style="padding-top: 20px; padding-bottom: 20px">
									<label class="control-label">-->景点名称</label>
									<div class="controls">
										<input type="text" id="scenicName" name="scenicName"><br>
										<span id="scenicNameTip" style="display:inline-block;" ></span>
									</div>
								</div>

								
								<div class="control-group"
									style="padding-top: 20px; padding-bottom: 20px">
									<label class="control-label">-->景点门票</label>
									<div class="controls">
										<input type="text" id="scenicPrice" name="scenicPrice">
									</div>
								</div>

								<div class="control-group"
									style="padding-top: 20px; padding-bottom: 20px">
									<label class="control-label">-->景点描述</label>
									<div class="controls">
										<textarea rows="5" cols="5" id="scenciDesc" name="scenicDesc"></textarea>
									</div>
								</div>
								
								<div class="control-group" style="padding-top: 20px; padding-bottom: 20px">
								 <!-- 1 头像预览效果 -->
								<div class="userImage" style="width:100px;height:100px; margin-left:205px;margin-bottom:30px" >
									<img src="${pageContext.request.contextPath}/back/img/preview-img.jpg" id="preview-img" />
								</div>
								<label class="control-label">-->景点图片</label>
								<div class="controls">
									
       									<input id="scenicPicture" name="scenicPicture" type="file" accept="image/jpg,image/jpeg,image/png,image/gif">
								</div>
									
							</div>
								 
								<div class="form-actions" style="margin-left:550px;margin-top:20px">
									<button id="btninsert" type="submit" class="btn btn-primary" style="font-size:20px">发布</button>
								</div>
							</form>
						</div>
					</div>

				</div>
			</div>

			<div class="row-fluid">
				<div id="footer" class="span12">
					2020 &copy; Travel Admin.
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.ui.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.uniform.js"></script>
	<script src="js/select2.min.js"></script>
	<script src="js/jquery.dataTables.min.js"></script>
	<script src="js/unicorn.js"></script>
	<script src="js/unicorn.tables.js"></script>
</body>

<script type="text/javascript">
	
	$(document).ready(function(){
		$("#scenicName").blur(function(){
			var scenicName = $(this).val();
			if(scenicName.trim().length==0){
				$("#scenicNameTip").text("景点名称不能为空");
				$("#scenicNameTip").addClass("error");
				// 发布按钮设置为不可用
				$("#btninsert").prop("disabled",true);
			}else{
				$.ajax({
					async:true,
					type:"get",
					url:"${pageContext.request.contextPath}/scenic",
					data:{
		   			 op:"existOfScenicName",
		   			 scenicName:scenicName
		   		 },
		   		 dataType:"text",
		   		 success:function(result){
		   			 console.log(result);
		   			if("exist" == result){ // 景点已存在,不可用
						$("#scenicNameTip").text("该景点已经被发布过了,请重新输入");
						$("#scenicNameTip").addClass("error");
						// 发布按钮设置为不可用
						$("#btninsert").prop("disabled",true);
					}else if("no exist" == result){ // 景点不存在,可用
						$("#scenicNameTip").text("");
						$("#scenicNameTip").removeClass("error");
						$("#btninsert").prop("disabled",false);
					}
		   		 },
		   		 error:function(){
		   			 alert("异步请求失败!");
		   		 }
					
				})
			}
		})
		
		// 头像选择做改变事件
		$("#scenicPicture").change(function(){
			// 生成图片预览功能
			// 1.得到文件列表数组,获取数组中第一个文件
			var imgFile = this.files[0];

			// 判断是否有上传文件
			if(imgFile==null){	
				$("#preview-img").prop("src","#");			
			}else{
				// 正则表达式验证选择的是否是图片类型
				var regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
				if (!regexImageFilter.test(imgFile.type)) {
					 alert("请选择有效图片");
					 $("#scenicPicture").val("");
				}else{ 
					// 2.构建文件读取流对象
					var fileReader =  new FileReader();
					// 3.利用流对象获取文件内容
					fileReader.readAsDataURL(imgFile);
					// 4.加载事件
					fileReader.onload = function(){
						// 5.渲染头像预览框
						$("#preview-img").prop("src",this.result); // this.result从文件读取流对象中获取数据
					}
				 } 
			}
		});
	});
</script>

</html>